<template>
  <div class="group_main">
    <div class="header_title">
      <span>身份/分组资料</span>
    </div>
    <div class="group_option" align="left" v-if="isauth('group_edit')">
      <el-button @click="addgroup()" type="primary" size="mini" icon="el-icon-plus">新增身份/分组</el-button>
      <!-- <el-button @click="editgroup()" type="primary" size="mini" icon="el-icon-edit">修改身份/分组</el-button>
      <el-button @click="delgroup()" type="primary" size="mini" icon="el-icon-delete">删除身份/分组</el-button>-->
    </div>
    <br />
    <el-table :data="groupList" border row-key="id" :header-cell-style="headFirst" :cell-style="(res) => headFirst_col(res, [])">
      <el-table-column label="身份/分组名称" prop="groupName" min-width="100px"></el-table-column>
      <el-table-column label="身份/分组数值" prop="groupCode" min-width="100px"></el-table-column>
      <el-table-column label="预存款金额(元)" prop="deposit" min-width="100px">
        <template slot-scope="scope">
          <div>{{ scope.row.deposit | amountyuan }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="卡有效周期" prop="lifeType">
        <template slot-scope="scope">
          <div>{{scope.row.lifeType | filterlefttype}}</div>
        </template>
      </el-table-column>-->
      <el-table-column label="卡有效期(月)" prop="lifeAmount"></el-table-column>
      <!-- <el-table-column label="限额(元)" prop="limitAmount"></el-table-column>
      <el-table-column label="限次" prop="limitCount"></el-table-column>-->
      <el-table-column label="押金(元)" prop="cashPledge">
        <template slot-scope="scope">
          <div>{{ scope.row.cashPledge | amountyuan }}</div>
        </template>
      </el-table-column>
      <el-table-column label="发卡手续费(元)" prop="costPrice">
        <template slot-scope="scope">
          <div>{{ scope.row.costPrice | amountyuan }}</div>
        </template>
      </el-table-column>
      <el-table-column label="补卡手续费(元)" prop="reissueFee">
        <template slot-scope="scope">
          <div>{{ scope.row.reissueFee | amountyuan }}</div>
        </template>
      </el-table-column>
      <el-table-column label="管理费(元)" prop="manageAmount">
        <template slot-scope="scope">
          <div>{{ scope.row.manageAmount | amountyuan }}</div>
        </template>
      </el-table-column>
      <el-table-column label="总限额(元)" prop="limitAmount">
        <template slot-scope="scope">
          <div>{{ scope.row.limitAmount | amountyuan }}</div>
        </template>
      </el-table-column>
      <el-table-column label="总限次" prop="limitCount"></el-table-column>
      <el-table-column label="充值时是否延长有效期" prop="isAutoRenew">
        <template slot-scope="scope">
          <div>{{ scope.row.isAutoRenew == 1 ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column width="100" label="操作" aling="center" v-if="isauth('group_edit')">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="editgroup(scope.row)">修改</el-button>
          <el-button type="text" size="mini" style="color: red" @click="delgroup(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="DialogTitle"
      :visible.sync="DialogFormVisible"
      width="500px"
      center
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <el-form :model="groupInfo" :rules="formdatamyrules" ref="groupInfo">
        <el-form-item>
            <span style="color:red">下方的参数配置，将会影响发卡，请谨慎修改</span>
            <el-popover placement="bottom" width="320" trigger="click" style="display:inline-block">
              <div>
                <span style="color:red">身份/分组数值：</span>
                <span>用于设备区分人员的身份/分组</span>
              </div>
              <div>
                <span style="color:red">预存款金额(元)：</span>
                <span>预存入卡内的金额</span>
              </div>
              <div>
                <span style="color:red">卡有效期(月)：</span>
                <span>发卡后可使用的月数</span>
              </div>
            
              <div slot="reference">
                <!-- <el-button type="text">提示</el-button> -->
                <el-button size="medium" class="tishi">帮助</el-button>
              </div>
            </el-popover>
        </el-form-item>
        <el-form-item label="身份/分组名称" label-width="110px" prop="groupName">
          <el-input v-model="groupInfo.groupName" size="mini" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="身份/分组数值" label-width="110px" prop="groupCode">
          <el-select
            v-model="groupInfo.groupCode"
            placeholder="请选择身份/分组"
            style="width: 70%"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预存款金额(元)" label-width="110px" prop="deposit">
          <el-input
            v-model="groupInfo.deposit"
            autocomplete="off"
            style="width: 70%"
            @keyup.native="keyupEvent($event, 'deposit')"
            size="mini"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="卡有效周期" label-width="100px" prop="lifeType">
          <el-radio-group v-model="groupInfo.lifeType">
            <el-radio style="width:15px;" label="0">限餐</el-radio>
            <el-radio style="width:15px;" label="1">限日</el-radio>
            <el-radio style="width:15px;" label="2">限周</el-radio>
            <el-radio style="width:15px;" label="3">限月</el-radio>
          </el-radio-group>
        </el-form-item>-->
        <el-form-item label="卡有效期(月)" label-width="110px" prop="lifeAmount">
          <el-input
            v-model.number="groupInfo.lifeAmount"
            autocomplete="off"
            style="width: 70%"
            size="mini"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="限额(元)" label-width="100px" prop="limitAmount">
          <el-input v-model="groupInfo.limitAmount" autocomplete="off" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item label="限次" label-width="100px" prop="limitCount">
          <el-input v-model="groupInfo.limitCount" autocomplete="off" style="width:70%"></el-input>
        </el-form-item>-->
        <el-form-item label="押金(元)" label-width="110px" prop="cashPledge">
          <el-input
            v-model="groupInfo.cashPledge"
            autocomplete="off"
            style="width: 70%"
            @keyup.native="keyupEvent($event, 'cashPledge')"
            size="mini"
          ></el-input>
        </el-form-item>
         <el-form-item label="发卡手续费(元)" label-width="110px" prop="costPrice">
          <el-input
            v-model="groupInfo.costPrice"
            autocomplete="off"
            style="width: 70%"
            @keyup.native="keyupEvent($event, 'costPrice')"
            size="mini"
          ></el-input>
        </el-form-item>
         <el-form-item label="补卡手续费(元)" label-width="110px" prop="reissueFee">
          <el-input
            v-model="groupInfo.reissueFee"
            autocomplete="off"
            style="width: 70%"
            @keyup.native="keyupEvent($event, 'reissueFee')"
            size="mini"
          ></el-input>
        </el-form-item>
       
        <el-form-item label="管理费(元)" label-width="110px" prop="manageAmount">
          <el-input
            v-model="groupInfo.manageAmount"
            autocomplete="off"
            style="width: 70%"
            @keyup.native="keyupEvent($event, 'manageAmount')"
            size="mini"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="总限额(元)" label-width="110px" prop="limitAmount">
          <el-input
            v-model="groupInfo.limitAmount"
            autocomplete="off"
            style="width: 70%"
            @keyup.native="keyupEvent($event, 'limitAmount')"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="总限次" label-width="110px" prop="limitCount">
          <el-input v-model="groupInfo.limitCount" style="width: 70%" size="mini"></el-input>
        </el-form-item> -->
        <el-form-item label label-width="110px" prop="isAutoRenew">
          <el-checkbox v-model="groupInfo.isAutoRenew">充值时是否延长有效期</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let checkLimitAmount = (rule, value, callback) => {
  if (!value) {
    // 通过callback传递错误信息
    callback()
  } else {
    // let emailReg = /^1[3456789]\d{9}$/;
    if (value < 0 || value > 650) {
      callback(new Error('总限额为0-650元'))
    } else {
      // 没有错误了就直接调用callback
      callback()
    }
  }
}
let checkLimitCount = (rule, value, callback) => {
  if (!value) {
    // 通过callback传递错误信息
    callback()
  } else {
    // let emailReg = /^1[3456789]\d{9}$/;
    if (value < 0 || value > 255) {
      callback(new Error('总限次为0-255次'))
    } else {
      // 没有错误了就直接调用callback
      callback()
    }
  }
}
export default {
  data() {
    return {
      changeschoolid: '',
      administrator: '',
      messageType: 0,
      mType: 0,
      groupList: [],
      options: [
        { value: 0, label: 0 },
        { value: 1, label: 1 },
        { value: 2, label: 2 },
        { value: 3, label: 3 },
        { value: 4, label: 4 },
        { value: 5, label: 5 },
        { value: 6, label: 6 },
        { value: 7, label: 7 },
        { value: 8, label: 8 },
        { value: 9, label: 9 },
        { value: 10, label: 10 },
        { value: 11, label: 11 },
        { value: 12, label: 12 },
        { value: 13, label: 13 },
        { value: 14, label: 14 },
        { value: 15, label: 15 }
      ],
      groupInfo: {
        groupName: '',
        groupGuid: '',
        groupCode: 1,
        deposit: '0',
        lifeType: 3,
        lifeAmount: '36',
        limitAmount: '0',
        limitCount: '0',
        cashPledge: '0',
        costPrice: '0',
        reissueFee:'0',
        manageAmount: '0',
        // 总限额
        limitAmount: '0',
        limitCount: '0',
        isAutoRenew: true
      },
      DialogTitle: '',
      DialogFormVisible: false,
      formdatamyrules: {
        groupName: [
          { required: true, message: '请填写身份/分组', trigger: ['blur'] }
        ],
        lifeAmount: [
          {
            required: true,
            message: '请填写身份/分组有效期',
            trigger: ['blur']
          },
          // { validator: lifeAmountValidator, trigger: 'blur' }
        ],
        groupCode: [
          { required: true, message: '请填写身份/分组数值', trigger: 'change' }
        ],
        limitAmount: [{ validator: checkLimitAmount, trigger: 'blur' }],
        limitCount: [{ validator: checkLimitCount, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid
    this.administrator = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.getGroupList() 
  },
  methods: {
    keyupEvent(e, name) {
      e.target.value = e.target.value.replace(/[^\d.]/g, '')
      e.target.value = e.target.value.replace(/\.{2,}/g, '.')
      e.target.value = e.target.value.replace(/^\./g, '0.')
      e.target.value = e.target.value.replace(
        /^\d*\.\d*\./g,
        e.target.value.substring(0, e.target.value.length - 1)
      )
      e.target.value = e.target.value.replace(/^0[^\.]+/g, '0')
      e.target.value = e.target.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2')
      this.groupInfo[name] = e.target.value
    },
    //新增身份/分组
    addgroup() {
      //初始化身份/分组信息对象
      this.initGroupInfo()
      this.mType = 0
      this.DialogFormVisible = true
      this.DialogTitle = '新增身份/分组资料'
    },
    //修改身份/分组
    editgroup(row) {
      console.log(row)
      this.groupInfo = JSON.parse(JSON.stringify(row))
      this.groupInfo.deposit = this.amountyua(row.deposit)
      this.groupInfo.cashPledge = this.amountyua(row.cashPledge)
      this.groupInfo.costPrice = this.amountyua(row.costPrice)
      this.groupInfo.reissueFee = this.amountyua(row.reissueFee)
      this.groupInfo.manageAmount = this.amountyua(row.manageAmount)

      this.groupInfo.limitAmount = this.amountyua(row.limitAmount)
      this.groupInfo.limitCount = row.limitCount
      this.groupInfo.isAutoRenew = row.isAutoRenew == 1 ? true : false

      this.mType = 1
      this.DialogFormVisible = true
      this.DialogTitle = '修改身份/分组资料'
    },
    //删除身份/分组
    delgroup(row) {
      this.$confirm('是否删除该身份/分组信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteUser(row.groupGuid, row.groupCode)
        })
        .catch(() => {})
    },
    // 删除身份/分组请求
    deleteUser(groupGuid, groupCode) {
      this.$http({
        url: this.$http.adornUrl('/unit/unit-user-group-delete'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            groupCode: groupCode,
            groupGuid: groupGuid,
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getGroupList()
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    //关闭 新增&修改 弹窗
    closeDialog() {
      this.initGroupInfo()
      this.DialogFormVisible = false
      this.getGroupList()
    },
    //获取身份/分组列表
    getGroupList() {
      this.$http({
        url: this.$http.adornUrl('/unit/unit-user-group-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.groupList = data.messageContent
        }
      })
    },
    //初始化身份/分组信息
    initGroupInfo() {
      this.groupInfo.groupName = ''
      this.groupInfo.groupCode = '1'
      this.groupInfo.deposit = '0'
      this.groupInfo.lifeType = 3
      this.groupInfo.lifeAmount = '36'
      this.groupInfo.limitAmount = '0'
      this.groupInfo.limitCount = '0'
      this.groupInfo.cashPledge = '0'
      this.groupInfo.costPrice = '0'
      this.groupInfo.reissueFee = '0'
      this.groupInfo.manageAmount = '0'
    },
    //确认
    confirm() {
      //mType : 0 新增 ， 1 修改
      this.$refs['groupInfo'].validate(valid => {
        if (valid) {
          this.groupInfo.unitGuid = this.changeschoolid
          let groupInfo = { ...this.groupInfo }
          let mURL, mMSG
          if (this.mType == 0) {
            mURL = this.$http.adornUrl('/unit/unit-user-group-add')
            mMSG = '添加身份/分组成功'
          } else {
            mURL = this.$http.adornUrl('/unit/unit-user-group-update')
            mMSG = '修改身份/分组成功'
          }
          groupInfo.deposit = parseInt(Number(this.groupInfo.deposit * 100))

          groupInfo.cashPledge = parseInt(
            Number(this.groupInfo.cashPledge) * 100
          )
          groupInfo.costPrice = parseInt(Number(this.groupInfo.costPrice) * 100)
          groupInfo.reissueFee = parseInt(Number(this.groupInfo.reissueFee) * 100)
          groupInfo.manageAmount = parseInt(
            Number(this.groupInfo.manageAmount) * 100
          )

          groupInfo.limitAmount = parseInt(
            Number(this.groupInfo.limitAmount) * 100
          )
          groupInfo.isAutoRenew = this.groupInfo.isAutoRenew ? 1 : 0
          // groupInfo.groupName = this.groupInfo.groupName;
          // groupInfo.groupCode = this.groupInfo.groupCode;
          // groupInfo.lifeType = this.groupInfo.lifeType;
          // groupInfo.lifeAmount = this.groupInfo.lifeAmount;
          // groupInfo.limitAmount = this.groupInfo.limitAmount;
          // groupInfo.limitCount = this.groupInfo.limitCount;

          // groupInfo.unitGuid = this.changeschoolid;
          // groupInfo.pkGroupId = this.groupInfo.pkGroupId;
          // groupInfo.syncState = this.groupInfo.syncState;

          console.log(groupInfo)
          console.log(this.groupInfo)
          this.$http({
            url: mURL,
            method: 'post',
            data: this.$http.adornData({
              messageContent: groupInfo,
              messageType: this.messageType
            })
          }).then(({ data }) => {
            if (data.messageCode === 500) {
              this.$message.error(data.errorMessage)
            }
            if (data.messageCode === 200) {
              this.$message({
                message: mMSG,
                type: 'success'
              })
              this.DialogFormVisible = false
              this.getGroupList()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        }
      })
    },
    //取消
    visible() {
      this.DialogFormVisible = false
      this.getGroupList()
    }
  },
  filters: {
    filterlefttype: function(lefttype) {
      if (lefttype == '0') {
        return '限餐'
      } else if (lefttype == '1') {
        return '限日'
      } else if (lefttype == '2') {
        return '限周'
      } else if (lefttype == '3') {
        return '限月'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.group_main {
  padding: 10px;
  .header_title {
    // padding-left: 22px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e5e9f2;
    color: #909399;
  }
  .group_option {
    border-bottom: 1px solid #e5e9f2;
    // text-indent: 20px;
    height: 40px;
    line-height: 40px;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 10px;
    padding-left: 40px;
  }
  /deep/.el-form-item {
    margin-bottom: 12px;
  }
}
</style>